/**
 * 用户管理
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 头部筛选 -->
    <span class="el-input">
      登录名称：<el-input
        v-model="screen.number"
        placeholder="请输入登录名称查询"
        style="width: 220px; margin-top: 20px; margin-right: 50px"
      ></el-input>
      姓名：<el-input
        v-model="screen.name"
        placeholder="请输入用户姓名查询"
        style="width: 230px; margin-top: 20px; margin-right: 50px"
      ></el-input>
      <el-button
        type="primary"
        style="margin-left: 0px"
        @click="handleSearchList()"
        >查询</el-button
      >
      <el-button style="margin-left: 5px">重置</el-button>
    </span>

    <!-- 添加点击 -->
    <el-form :inline="true" class="user-search">
      <el-form-item>
        <el-button
          size="small"
          type="primary"
          icon="el-icon-plus"
          @click="handleAdd()"
          >新增</el-button
        >
      </el-form-item>
    </el-form>
    <!--列表-->
    <el-table
      size="small"
      :data="listData"
      highlight-current-row
      v-loading="loading"
      border
      element-loading-text="拼命加载中"
      style="width: 100%"
    >
      <el-table-column sortable align="center" prop="name" label="员工名字">
      </el-table-column>
      <el-table-column sortable align="center" prop="username" label="员工账号">
      </el-table-column>
      <!-- <el-table-column sortable align="center" prop="username" label="用户类型">
      </el-table-column> -->
      <el-table-column sortable align="center" prop="password" label="员工密码">
      </el-table-column>
      <el-table-column sortable align="center" prop="phone" label="员工电话">
      </el-table-column>
      <el-table-column
        sortable
        align="center"
        prop="address"
        label="员工地址"
      ></el-table-column>
      <el-table-column
        sortable
        align="center"
        prop="age"
        label="员工年龄"
      ></el-table-column>
      <el-table-column
        sortable
        align="center"
        prop="wages"
        label="员工工资"
      ></el-table-column>
      <el-table-column
        sortable
        align="center"
        prop="uuid"
        label="员工编号"
      ></el-table-column>
      <el-table-column align="center" label="操作" min-width="100">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleUpdate(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="deleteUser(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <!-- <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      layout="total, sizes,prev, pager, next,jumper"
      :current-page.sync="list.pageNum"
      :page-size="list.pageSize"
      :total="total"
    >
    </el-pagination> -->
    <!--添加 编辑界面 -->
    <el-dialog
      :title="isEdit ? '编辑' : '添加'"
      :visible.sync="editFormVisible"
      width="30%"
      @click="closeDialog"
    >
      <el-form label-width="120px" :model="editForm" ref="editForm">
        <el-form-item label="员工名字" prop="name">
          <el-input
            size="small"
            v-model="editForm.name"
            auto-complete="off"
            placeholder="请输入名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="员工账号：">
          <el-input
            size="small"
            v-model="editForm.username"
            auto-complete="off"
            placeholder="请输入名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="员工密码：">
          <el-input
            size="small"
            v-model="editForm.password"
            auto-complete="off"
            placeholder="请输入名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="员工电话：">
          <el-input
            size="small"
            v-model="editForm.phone"
            auto-complete="off"
            placeholder="请输入名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="员工地址：">
          <el-input
            size="small"
            v-model="editForm.address"
            auto-complete="off"
            placeholder="请输入名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="员工年龄：">
          <el-input
            size="small"
            v-model="editForm.age"
            auto-complete="off"
            placeholder="请输入名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="员工工资：">
          <el-input
            size="small"
            v-model="editForm.wages"
            auto-complete="off"
            placeholder="请输入名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="员工编号：">
          <el-input
            size="small"
            v-model="editForm.uuid"
            auto-complete="off"
            placeholder="请输入名称"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">取消</el-button>
        <el-button
          size="small"
          type="primary"
          :loading="loading"
          class="title"
          @click="handleDialogConfirm()"
          >保存</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getQueryn, insertSave, deletes, update } from "../../api/UserAdmin";

const defaultEditForm = {
  address: "",
  age: null,
  name: "",
  password: "",
  phone: "",
  username: "",
  uuid: null,
  wages: "",
};
export default {
  data() {
    return {
      loading: false, //是显示加载
      editFormVisible: false, //控制编辑页面显示与隐藏
      isEdit: false,
      total: "",
      // 表格
      editForm: Object.assign({}, defaultEditForm),
      // rules表单验证
      // rules: {
      //   name: [{ required: true, message: "请输入名称", trigger: "blur" }],
      // },
      listData: [], //用户数据
      brandOptions: [],
      // 筛选对象传值
      screen: {
        // number: "",
        name: "",
        // date: "",
      },
    };
  },
  components: {},

  /**
   * 创建完毕
   */
  created() {
    this.getdata();
  },
  methods: {
    // handleSizeChange(val) {
    //   this.list.pageNum = 1;
    //   this.list.pageSize = val;
    //   this.getdata();
    // },
    // handleCurrentChange(val) {
    //   console.log(val);
    //   this.list.pageNum = val;
    //   this.getdata();
    // },
    // 获取列表
    getdata() {
      this.loading = true;
      getQueryn(this.screen)
        .then((res) => {
          this.loading = false;
          if (res.code != 200) {
            this.$message({
              type: "info",
              message: res.message,
            });
          } else {
            this.$message({
              type: "success",
              message: res.message,
            });
            this.listData = res.result;
            // this.total = res.data.total;
            // this.list.pageNum = res.data.pages;
          }
        })
        .catch((err) => {
          this.loading = false;
          this.$message.error("菜单加载失败，请稍后再试！");
        });
    },
    //搜索
    handleSearchList() {
      this.getdata();
    },
    // 添加
    handleAdd() {
      this.editFormVisible = true;
      this.isEdit = false;
      // this.getBrandList();
    },
    // getBrandList() {
    //   getProductCenter().then((response) => {
    //     this.brandOptions = [];
    //     let brandList = response.data;
    //     for (let i = 0; i < brandList.length; i++) {
    //       this.brandOptions.push({
    //         label: brandList[i].name,
    //         value: brandList[i].id,
    //       });
    //     }
    //   });
    // },
    handleBrandChange(val) {
      let brandName = "";
      for (let i = 0; i < this.brandOptions.length; i++) {
        if (this.brandOptions[i].value === val) {
          brandName = this.brandOptions[i].label;
          break;
        }
      }
      this.editForm.productType = brandName;
    },
    //显示编辑界面
    handleUpdate(index, row) {
      this.editFormVisible = true;
      this.isEdit = true;
      // this.getBrandList();
      console.log(row);
      this.editForm = row;
    },

    // 编辑、增加页面保存方法
    handleDialogConfirm() {
      this.$confirm("是否要确认?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        if (this.isEdit) {
          update(this.editForm).then((res) => {
            if (res.code == 200) {
              this.$message({
                message: "修改成功！",
                type: "success",
              });
              this.editFormVisible = false;
              this.loading = false;
              this.getdata();
            } else {
              this.$message({
                message: res.message,
                type: "info",
              });
            }
          });
        } else {
          insertSave(this.editForm).then((res) => {
            if (res.code == 200) {
              this.$message({
                message: "添加成功！",
                type: "success",
              });
              this.getdata();
              this.editFormVisible = false;
              this.loading = false;
            } else {
              this.$message({
                message: res.message,
                type: "info",
              });
            }
          });
        }
      });
    },
    // 删除
    deleteUser(index, row) {
      console.log(row.name);
       let data= {
        name:row.name
       } 
      this.$confirm("确定要删除吗?", "信息", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
     
        .then(() => {
          deletes(data)
            .then((res) => {
              if (res.code == 200) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                this.getdata();
              } else {
                this.$message({
                  type: "info",
                  message: res.message,
                });
              }
            })
            .catch((err) => {
              this.loading = false;
              this.$message.error("删除失败，请稍后再试！");
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 关闭编辑、增加弹出框
    closeDialog() {
      this.editFormVisible = false;
    },
  },
};
</script>
<style >
.el-dialog {
  width: 40% !important;
}
.el-input--small .el-input__inner {
  width: 70%;
}
.bth {
  float: right;
  margin-top: -30px;
  margin-left: -30px;
}
</style>
<style scoped>
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
</style>

 
 